<!--  -->
<template>
  <div class="mine">
    <div id="bei">
      <div class="jing"></div>
      <div id="mine">
        <div id="left">
          <!-- 头像 -->
          <img
            src="https://mpp-ciam-oss-prod.oss-cn-shanghai.aliyuncs.com/avatar/2.png"
            alt=""
          />
          <div id="span">
            <van-icon id="van" name="edit" color="#fff" size="14" />
          </div>
          <!-- 名称 -->
          <p>{{ name }}</p>
        </div>
        <div id="right" @click="shezhi">
          <!-- 设置按钮 -->
          <van-icon name="setting-o" color="#fff" />
        </div>
      </div>

      <div id="fen">
        <ul>
          <li>
            <van-icon name="orders-o" color="#fff" size="18" />
            <p @click="ding">我的订单</p>
          </li>
          <li>
            <van-icon name="like-o" color="#fff" size="18" />
            <p @click="shou">我的收藏</p>
          </li>
          <li>
            <van-icon name="coupon-o" color="#fff" size="18" />
            <p @click="you">优惠券</p>
          </li>
          <li>
            <van-icon name="location-o" color="#fff" size="18" />
            <p @click="di">收货地址</p>
          </li>
        </ul>
      </div>

      <div id="vip">
        <div class="left">
          <h3>宜家俱乐部</h3>
          <p>免费开卡，获50积分</p>
        </div>
        <div class="right">
          <img
            src="https://static.web.ikea.cn/static/images/login/logo.svg"
            alt=""
          />
        </div>
      </div>

      <div id="kefu">
        <van-icon name="audio" size="16" id="zuo" />
        <p>在线客服</p>
        <van-icon name="arrow" size="16" id="you" />
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import axios from "axios";
import { mine } from "../../api/mine";
import { getToken } from "../../utils/setCookie";
export default {
  //import引入的组件需要注入到对象中才能使用

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    let log = getToken("token");
    if (!log) {
      next("/login");
    } else {
      next();
    }
  },
  components: {},
  data() {
    //这里存放数据
    return {
      name: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 调用用户信息

    async getmine() {
      // let log = getToken("token");
      // console.log(log);
      let result = await mine();
      console.log(result);
      console.log(result.userName);
      this.name = result.userName;
    },

    ding() {
      this.$router.push("/allorderlist/payorder");
    },
    shou() {
      this.$router.push("/collection");
    },
    you() {
      this.$router.push("/coupon");
    },
    di() {
      this.$router.push("/addresslist");
    },
    shezhi() {
      this.$router.push("/setup");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getmine();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.jing {
  width: 100%;
  height: 51px;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 188px;
  background: url(https://static.web.ikea.cn/static/images/login/faminfo.svg)
    no-repeat;
}
#kefu {
  /* width: 100%; */
  height: 75px;
  margin: 0 auto;
  border-top: 2px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  line-height: 75px;
  padding: 0 20px;
}
#kefu p {
  width: 280px;
  text-indent: 20px;
  font-size: 12px;
}
#zuo {
  line-height: 75px;
}
#you {
  line-height: 75px;
}
#left #span {
  display: block;
  background-color: #000000;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 55px;
  left: 49px;
  border-radius: 50%;
}
#span #van {
  position: relative;
  top: 2px;
  left: 2px;
}
#bei {
  width: 100%;
  height: 230px;
  background-color: #0058a3;
  position: relative;
}
#mine {
  width: 273px;
  height: 40px;
  margin: 0 auto;
  /* display: flex; */
  padding: 26px 20px;
  justify-content: space-between;
}
#mine img {
  width: 40px;
  height: 40px;
  float: left;
}
#mine p {
  float: left;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  line-height: 40px;
  margin-left: 10px;
}
#right {
  flex: 1;
  line-height: 40px;
  float: right;
}

#fen li {
  float: left;
  height: 50px;
  width: 73px;
  text-align: center;
}
#fen p {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
  margin: 7px;
}
#fen {
  width: 295px;
  height: 60px;
  margin: 0 auto;
  padding-top: 8px;
}

#vip {
  width: 220px;
  height: 50px;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(228.51deg, #029edc -11.5%, #007cc8 94.27%);
  padding: 10px;
}
#vip .left {
  float: left;
}
#vip .right {
  float: right;
}
.left h3 {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
.left p {
  color: #fff;
  font-size: 12px;
}
.right img {
  width: 58px;
  height: 26px;
}
</style>
